<template>
	<view class="banner">
		<view class="banner__header">
			<text class="header__text">{{areaName}}</text>
			<text class="header__text">{{$t("trade.profit")}}</text>
		</view>
		<view class="banner__info">
			<text class="info__num">{{propertyInfo.zong_amount || 0}}</text>
			<view class="info__right">
				<text class="right__float">{{propertyInfo.yingkui|| 0}}</text>
				<text class="right__rate">{{propertyInfo.yingkui_percent|| 0}}</text>
			</view>
		</view>
		
		<uni-popup ref="popup" type="dialog">
			<uni-popup-dialog  :content ="content" :confirmText="$t('stock.yes')" :cancelText="$t('stock.no')"  :title="config_text" mode="base" message="22" :duration="2000" :before-close="true" @close="close" @confirm="confirm"></uni-popup-dialog>
		</uni-popup>
		
		<view class="banner__footer">
			
			<view class="banner_left">
				<view class="banner_left_top">
					<view class="banner_top_one">{{$t("trade.marketValue")}}</view>
					<view class="banner_top_two">{{propertyInfo.market_amount || 0}}</view>
				</view>
				<view class="banner_left_bottom">
					<view class="banner_top_one">{{$t("trade.cash")}} </view>
					<view class="banner_top_two">{{propertyInfo.width_amount || 0}}</view>
				</view>
				
				<view class="banner_left_bottom">
					<view class="banner_top_one">{{$t("trade.width")}}</view>
					<view class="banner_top_two">{{propertyInfo.amount || 0}}</view>
				</view>
			</view>
			<view class="banner_right">
				<view class="banner_left_top">
					<view class="banner_top_one">{{$t("trade.supplement")}}</view>
					<view class="banner_top_two">{{propertyInfo.replenishment || 0}}</view>
				</view>
				<view class="banner_left_bottom">
					<view class="banner_top_one">{{$t("trade.freeze")}}</view>
					<view class="banner_top_two">{{propertyInfo.dongjie_amount || 0}}</view>
				</view>
				
				<view class="banner_left_bottom" v-if="propertyInfo.replenishment > 0">
					<!-- <switch  :checked="propertyInfo.is_checked" color="#FFCC33"  @change="open" /> -->
					
					<button v-if="propertyInfo.is_checked" @click="open(0)" class="mini-btn" type="warn" size="mini">{{$t("trade.width_on_s")}}</button>
					<button v-else @click="open(1)" class="mini-btn" style="color:#ffffff;backgroundColor:#1AAD19;borderColor:#1AAD19" size="mini">{{$t("trade.width_off_s")}}</button>
						
				</view>
				<view class="banner_left_bottom" v-else>
					
				</view>
				
				
			</view>
			<!-- <view class="footer__item">
				<text class="item__title">{{$t("trade.marketValue")}}</text>
				<text class="item__num">{{propertyInfo.market_amount || 0}}</text>
			</view>
			<view class="footer__item">
				<text class="item__title">{{$t("trade.cash")}}</text>
				<text class="item__num">{{propertyInfo.amount || 0}}</text>
			</view>
			<view class="footer__item">
				<text class="item__title">{{$t("trade.supplement")}}</text>
				<text class="item__num">{{propertyInfo.replenishment || 0}}</text>
			</view>
			<view class="footer__item">
				<text class="item__title">{{$t("trade.freeze")}}</text>
				<text class="item__num">{{propertyInfo.dongjie_amount || 0}}</text>
			</view> -->
		</view>
	</view>
</template>

<script>
	export default{
		data(){
			return {
				areaList:[],
				areaIndex:0,
			    chuan_value:1,
				config_text:'',
				button_text:'',
				content:'5'+this.$t("trade.bei"),
				checkedValue:true
			}
		},
		props:{
			areaName:{
				type:String,
				default:""
			},
			propertyInfo:{
				type:Object,
				default:()=>({})
			}
		},
		
		methods:{
			open(button_value) {
				this.chuan_value = 	button_value
				if(button_value){
					
					this.config_text = this.$t("trade.width_off")
				
				}else{
					this.config_text = this.$t("trade.width_on")
				
				}
				
				this.content = this.propertyInfo.leverage+this.$t("trade.bei"),

				this.$refs.popup.open()
			},
		
			close() {
				
				this.$refs.popup.close()
			},
			
			confirm(value) {
				// 输入框的值
				if(!this.chuan_value){
				
					//关闭
					let res =  this.$api.leverage(this.propertyInfo.classify_id,0)
					if (res && res.code === 1) {
						uni.showToast({
							title: '关闭成功',
							icon: 'none'
						})
					}
					
					
					this.propertyInfo.is_checked = false;
					
					
				}else{
					
					let res =  this.$api.leverage(this.propertyInfo.classify_id,1)
					if (res && res.code === 1 && res.data) {
						//开启
						uni.showToast({
							title: '开启成功',
							icon: 'none'
						})
					}
					this.propertyInfo.is_checked = true;
					
				}
				// TODO 做一些其他的事情，手动执行 close 才会关闭对话框
				// ...
				this.$refs.popup.close()
			}
		}
	}
</script>

<style lang="scss" scoped>
	.banner{
		width: 690rpx;
		// height: 380rpx;
		background: url("@/static/imgs/trade_banner.png") no-repeat center center;
		background-size: 100% 100%;
		margin-top: 34rpx;
		padding: 26rpx 20rpx;
		box-sizing: border-box;
		.banner__header{
			@include flexRowAlign(space-between);
			.header__text{
				font-size: 26rpx;
				font-weight: 800;
				color: #FFFFFF;
			}
		}
		.banner__info{
			@include flexRowAlign(space-between);
			margin-top: 40rpx;
			.info__num{
				color: #fff;
				font-size: 46rpx;
				font-weight: bold;
			}
			.info__right{
				color: #fff;
				@include flexCenter(column);
				.right__float{
					font-size: 30rpx;
					font-weight: 800;
				}
				.right__rate{
					font-size: 28rpx;
					font-weight: 500;
					margin-top: 8rpx;
				}
			}
		}
		.banner__footer{
		/* 	@include flexRowAlign(space-between);
			flex-wrap: wrap; */
			display: flex;
			margin-top: 40rpx;
			/* border: 1px solid pink; */
			.footer__item{
				width: 46%;
				@include flexRowAlign(space-between);
				margin-top: 40rpx;
				.item__title{
					font-size: 24rpx;
					font-weight: bold;
					color: #FFFFFF;
				}
				.item__num{
					font-size: 24rpx;
					color: #FFFFFF;
				}
			}
			.banner_left{
				flex: 0.5;
				height: 300rpx;
				/* border: 1px solid pink; */
				.banner_left_top{
					width: 100%;
					/* height: 60rpx; */
					.banner_top_one{
						font-size: 24rpx;
						color: #FFFFFF;
					}
					.banner_top_two{
						font-size: 24rpx;
						color: #FFFFFF;
					}
				}
				.banner_left_bottom{
					width: 100%;
					/* height: 60rpx; */
					padding-top: 30rpx;
					.banner_top_one{
						font-size: 24rpx;
						color: #FFFFFF;
					}
					.banner_top_two{
						font-size: 24rpx;
						color: #FFFFFF;
					}
				}
			}
			.banner_right{
				flex: 0.5;
				height: 80rpx;
				.banner_left_top{
					width: 100%;
					/* height: 60rpx; */
					.banner_top_one{
						font-size: 24rpx;
						color: #FFFFFF;
					}
					.banner_top_two{
						font-size: 24rpx;
						color: #FFFFFF;
					}
				}
				.banner_left_bottom{
					width: 100%;
					padding-top: 30rpx;
					/* height: 60rpx; */
					.banner_top_one{
						font-size: 24rpx;
						color: #FFFFFF;
					}
					.banner_top_two{
						font-size: 24rpx;
						color: #FFFFFF;
					}
				}
			}
		}
	}
</style>